<!doctype html>
<html>
<head>
#parse("vm/common/header.html")

<script>

var type_chart = "bar"; // "column";


$(document).ready(function () {
    $("#ketqua_container").hide();
    //---------init--------------
    //lay danh sach hoc ky

    //---------------------------

});

function report() {
    //hide
    $("#ketqua_container").hide();

    //lay du lieu tu server
    getData();
}

function getData() {
    //call server to get data
    jQuery.ajax({
        type: "POST",
        url: "tuyensinhtinhthanhdata.action?namHoc=" + jQuery("#namHoc").val() ,
        data: {} ,
        contentType: "application/json; charset=utf-8",
        dataType: "json", //dung cai nay thi response phai dung json format, neu khong thi error parseerror
        success: function (response) {
	        var data = response;
	        //process data 
			
	        if(data!=null ){
	        	//view data
	        	viewData(data);
	        }else{
	        	alert("NODATA");
	        }
    	},error: function (xhr, status, error) {
    		alert('ERROR');
            var err = eval("(" + xhr.responseText + ")");
            console.log(err.Message);
        }
    });
}

function viewData(data) {
    var datainfo = createTable(data);
	
  	//---show------
    $("#ketqua_container").show();
  	
  	
    //---draw-chart---
    drawChart(datainfo);
}

function createTable(data) {
	//data.dh, data.cd
	var categories = [];
	var dh_data = [];
	var cd_data = [];
	//----------------------
    //create tbl
    var tblid = "table_container";
    
	//----daihoc----
	var html = '';
	html+= '<table id="' + tblid + '" class="table">';
	html+= '<tr>';
    html+= '<td>' + '<h3>ĐẠI HỌC</h3>' + '</td>';
    html+= '</tr>';
    html+= '<tr>';
    html+= '<td>';
    
	html+= '<table id="' + tblid + '1" class="table">';
    html+= ' <thead>';
    html+= '    <tr>';
    html+= '      <th>STT</th>';
    html+= '      <th>Vùng miền</th>';
    html+= '      <th>Số SV</th>';
    html+= '    </tr>';
    html+= '  </thead>';
    html+= '  <tbody>';
    

    [{"soSV":"5000","vungmien":"Tay Nguyen"}]
    for(var i = 0; i < data.dh.length ; i++){
    	var it = data.dh[i];
	    html+= '    <tr>';
	    html+= '      <td>' + (i+1) + '</td>';
	    html+= '      <td>' + it.vungmien + '</td>';
	    html+= '      <td>' + it.soSV + '</td>';
	    html+= '    </tr>';
	    dh_data.push({name: it.vungmien , y : parseInt(it.soSV)});
	}
    html+= '  </tbody>';
    html+= '</table>';
    html+= '</td>';
    html+= '</tr>';
    
  	//----caodang----
  	html+= '<tr>';
    html+= '<td>' + '<h3>CAO ĐẲNG</h3>' + '</td>';
    html+= '</tr>';
    html+= '<tr>';
    html+= '<td>';
    
    html+= '<table id="' + tblid + '2" class="table">';
    html+= ' <thead>';
    html+= '    <tr>';
    html+= '      <th>STT</th>';
    html+= '      <th>Vùng miền</th>';
    html+= '      <th>Số SV</th>';
    html+= '    </tr>';
    html+= '  </thead>';
    html+= '  <tbody>';
    

    [{"soSV":"5000","vungmien":"Tay Nguyen"}]
    for(var i = 0; i < data.cd.length ; i++){
    	var it = data.cd[i];
	    html+= '    <tr>';
	    html+= '      <td>' + (i+1) + '</td>';
	    html+= '      <td>' + it.vungmien + '</td>';
	    html+= '      <td>' + it.soSV + '</td>';
	    html+= '    </tr>';
	    cd_data.push({name: it.vungmien , y : parseInt(it.soSV)});
	}
    html+= '</tbody>';
    html+= '</table>';
    html+= '</td>';
    html+= '</tr>';
    
    html+= '  </tbody>';
    html+= '</table>';

    $("#data_container").html(html);
    
    //markup table
    //markup_table();
    
    return {dh : dh_data ,
    		cd :cd_data
    	};
}
function drawChart(datainfo) {
	
	
    $('#chart_container1').highcharts({
    	chart: {
        },
        title: {
            text: '$pagename'
        },
        subtitle: {
            text: "Tỷ lệ vùng miền Đại Học " +  " - Năm học : " + jQuery("#namHoc :selected").text()
        },
        credits: {
            enabled: false
        },
        tooltip: {
            pointFormat:  '{series.name}: <b>{point.y: ,.0f}</b>'//'{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: 'Vùng miền',
            data: datainfo.dh
        }]
    });
    
    $('#chart_container2').highcharts({
    	chart: {
        },
        title: {
            text: '$pagename'
        },
        subtitle: {
            text: "Tỷ lệ vùng miền Cao Đẳng " +  " - Năm học : " + jQuery("#namHoc :selected").text()
        },
        credits: {
            enabled: false
        },
        tooltip: {
            pointFormat:  '{series.name}: <b>{point.y: ,.0f}</b>'//'{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: 'Vùng miền',
            data: datainfo.cd
        }]
    });
}

function export_excel() {
	var filename = "bc-tinhthanh"+ jQuery("#namHoc").val() 
		+ ".xls"; 
    tableToExcel('table_container', 'baocao', filename);
}

function markup_table(){
	$('#table_container').bind('dynatable:preinit', function (e, dynatable) {
        dynatable.utility.textTransform.myNewStyle = function (text) {
            return text
             .replace(/\s+/, '_')
             .replace(/[A-Z]/, function ($1) { return $1 + $1 });
        };
    }).dynatable({
        table: {
            defaultColumnIdStyle: 'myNewStyle'
        },
        features: {
            paginate: false,
            search: false,
            recordCount: false,
            perPageSelect: false
        }
    });
}

</script>


</head>
<body>
<!-- tab menu -->
#parse("vm/common/top.html") 

<!-- title page -->
#parse("vm/common/title.html")
<!-- Content ---->
<div class="content_wapper padding">
<div class="container">
<div class="row">

<!-- left menu -->
#parse("vm/common/left-menu.html")

<!-- right content -->
#parse("vm/common/small-title.html")

<div class="sinhvien_wapper" style="">   
    <!--table-->
    <div>
    <!--filter-->
    <div class="row padding_notop" style="border-bottom: 1px solid #FFFFFF;">
    <div class="hocky-filter col-md-3" >
        <label>Năm học</label>
    	<select id="namHoc" class="form-control" name="namHoc">
          <option value="2014">2014-2015</option>
          
          <option value="2013">2013-2014</option>
          
          <option value="2012">2012-2013</option>
          
          <option value="2011">2011-2012</option>
        </select>
    </div>
    <div class="col-md-1"></div>
    
    <div class="col-md-3" style="margin-left: 20px;padding-top: 25px;">
        <div class="button" style="width: 120px;" onclick="report()" >Báo cáo</div>
    </div>
    </div>

    <!-------------ketqua-------------->
    <div id="ketqua_container" style="margin-top:10px">

    <!--dulieu-->
    <div >
        <label>Dữ liệu</label>
        <div style="float:right">
            <ul>
                <li>
                    <a style="border-width: 1px;border-color: black;border-style: solid;padding: 2px;" 
                        onclick="export_excel()" href="#">EXCEL</a>
                    <a id="dlink"  style="display:none;"></a>
                </li>
            </ul>
        </div>
    </div>
    
    <div id="data_container">
    </div>
    
    <!--chart-->
    <div>
    <div>
        <label>Biểu đồ</label>
    </div>
    <div class="row">
    <div class="col-md-6">
    <div id="chart_container1"></div>
    </div>
    <div class="col-md-6">
    <div id="chart_container2"></div>
    </div>
    </div>
    
    
    </div>
    </div>
</div>

</div>


</div>
</div>
</div>
<!-- end Content ---->

<!-- Footer ---->
#parse("vm/common/footer.html")
</body>
</html>